<template>
	<view>
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="调查问卷" :autoBack="true">
			</u-navbar>
		</view>
		<view class="con-body" style="background-color: #fff;">
			<view>
				<view style="padding:0 20rpx 20rpx;">
					<view class="title_con">{{detail.span}}丨{{detail.name}}</view>
					<view style="white-space:pre-wrap;text-align: center;margin-bottom:30rpx;">
						<rich-text :nodes="detail.description"></rich-text>
					</view>
				</view>
				<view style="padding:0 20rpx;">
					<view class="list_con" v-for="(item,index) in questionlist" :key="index">
						<view style="margin-bottom:30rpx;">
							{{index+1}}、{{item.name}}
						</view>
						<view v-if="item.type==1">
							<u-radio-group
							    placement="column"
							    @change="groupChange(item.id)"
							  >
							    <u-radio
							      :customStyle="{marginBottom: '8px',marginRight: '8px'}"
								  activeColor="#008987"
							      v-for="(ite, inde) in item.select"
							      :key="inde"
							      :label="ite"
							      :name="ite"
							      @change="radioChange"
							    >
							    </u-radio>
							</u-radio-group>
						</view>
						<view v-if="item.type==2">
							 <u-checkbox-group
								placement="column"
								@change="checkboxChange"
							>
								<u-checkbox
									:customStyle="{marginBottom: '8px'}"
									activeColor="#008987"
									v-for="(ite, inde) in item.select"
									:key="inde"
									:label="ite"
									:name="ite"
									@change="checkChange1(item.id)"
								>
								</u-checkbox>
							</u-checkbox-group>
						</view>
						<view class="text_con" v-if="item.type==3">
							<textarea :name="index" cols="30" rows="6" placeholder="请输入..." :data-i="item.id" @input="inputconfirm"></textarea>
						</view>
					</view>
					
					
					<view style="padding:20rpx 0 180rpx;border-top:20rpx solid #f8f8f8;">
						<view class="input_con">
							<text>您的房号</text>
							<input type="text" v-model="house">
							<view><text style="font-size: 22rpx;color:orange;">(楼栋-单元—房屋)</text></view>
						</view>
						<view class="input_con">
							<text>您的姓名</text>
							<input type="text" v-model="name">
						</view>
						<view class="input_con">
							<text>您的电话</text>
							<input type="text" v-model="tel">
						</view>
						<view class="btn_con" @click="confirmbtn">确认提交</view>
					</view>
				</view>
				
			</view>
			
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getQuestionStatus,getQuestion,setQuestion
	} from "@/service/questionService.js";
	import cookie from '@/util/store/cookie.js';
	export default {
		data() {
			return {
				detail:{},
				questionlist:[],
				
				radiovalue:'',
				checkvalue:'',
				check:0,
				questionAnswer:[],
				
				name:'',
				tel:'',
				house:''
			}
		},
		mounted() {
			getQuestionStatus().then(this.getQuestionStatus);
			
		},
		methods:{
			getQuestionStatus(e){
				if(e.code==200){
					this.detail=e.result;
					getQuestion({id:e.result.id}).then(this.getQuestion);
				}
			},
			getQuestion(e){
				if(e.code==200){
					this.questionlist=e.result;
					var obj={};
					for(var i=0;i<=e.result.length-1;i++){
						obj={id:e.result[i].id,select:''}
						this.questionAnswer.push(obj)
					}
					// console.log(this.questionAnswer);
				}
			},
			groupChange(n) {
				var that=this;
				// console.log('groupChange', n);
				for(var i=0;i<=this.questionAnswer.length-1;i++){
					if(this.questionAnswer[i].id==n){
						that.questionAnswer[i].select=that.radiovalue
					}
				}
				
				
			},
			radioChange(n) {
				// console.log('radioChange', n);
				this.radiovalue=n;
			},
			
			checkboxChange(n) {
				// console.log('change', n);
				if(n.length>0){
					this.checkvalue=n.join(',');
				}else{
					this.checkvalue=''
				}
				// console.log(this.check-1);
				for(var i=0;i<=this.questionAnswer.length-1;i++){
					if(this.questionAnswer[i].id==this.check){
						this.questionAnswer[i].select=this.checkvalue
					}
				}
			},
			inputconfirm(e){
				var n=e.currentTarget.dataset.i;
				for(var i=0;i<=this.questionAnswer.length-1;i++){
					if(this.questionAnswer[i].id==n){
						this.questionAnswer[i].select=e.detail.value
					}
				}
				
				// this.questionAnswer[i].select=e.detail.value;
			},
			checkChange1(n){
				var that=this;
				// console.log('changegroup', n);
				this.check=n;
				
			},
			
			confirmbtn(){
				var that=this;
				var obj={};
				obj.id=this.detail.id;
				obj.name=this.name;
				obj.tel=this.tel;
				obj.house=this.house;
				obj.content=JSON.stringify(this.questionAnswer);
				// console.log(obj);
				setQuestion(obj).then(res=>{
					// console.log(res);
					if(res.code==200){
						this.$refs.uToast.show({
							message: res.msg,
							type: 'success',
							url: ''
						});
						cookie.set('questionId',that.detail.id);
						setTimeout(function(){
							uni.navigateBack();
						},1000)
					}else{
						this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
							url: ''
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.title_con{
		text-align: center;
		padding:20rpx 0;
		font-weight: bold;
		margin-bottom:30rpx;
	}
	.list_con{
		padding:20rpx 0;border-top:20rpx solid #f8f8f8;
	}
	
	.text_con{
		textarea{
			width:94%;
			padding:20rpx;
			border-radius: 15rpx;
			background-color: #f8f8f8;
		}
	}
	.input_con{
		padding:15rpx 0;
		input{
			display: inline-block;
			width:70%;
			padding:0 10rpx;
			border-bottom:1rpx solid #ddd;
			vertical-align: middle;
			margin-left:20rpx;
			border-radius: 15rpx;
		}
		text{
			vertical-align: middle;
		}
	}
	.btn_con{
		width:100%;
		height:70rpx;
		line-height: 70rpx;
		text-align: center;
		margin:0 auto;
		color:#fff;
		border-radius: 40rpx;
		margin-top:80rpx;
		background-image: linear-gradient(to right,#008189,#0c515c);
	}
</style>